<app-header-outside />
<main class="wsl-min-h-screen-1 grid">
  <div
    class="mx-auto w-full max-w-screen-sm space-y-4 self-center rounded-md bg-white p-8 shadow-md dark:bg-gray-800">
    <h2
      class="text-center text-2xl font-semibold text-black dark:text-gray-300">
      Welcome Aboard!
    </h2>
    <p class="text-center text-sm text-black dark:text-gray-300">
      Before we get started, we'd like to know a little more about you.
    </p>
    <hr class="border-2 border-gray-100 dark:border-gray-700" />
    <form
      class="wsl-form flex-grow px-2 py-4"
      [formGroup]="onboardForm"
      (ngSubmit)="onSubmit(onboardForm.value)"
      novalidate>
      <app-alert [alert]="alert" *ngIf="alert" />
      <div>
        <label class="wsl-input-label" for="wsl-fname">Full Name</label>
        <input
          class="wsl-input-field"
          type="text"
          id="wsl-fname"
          name="fname"
          formControlName="fname"
          aria-describedby="wsl-fname-help"
          required
          autocomplete="name"
          data-lpignore="true" />
        <small
          id="wsl-fname-help"
          [ngClass]="hints.get('fname').type"
          [innerHTML]="hints.get('fname').text"></small>
      </div>
      <div>
        <label class="wsl-input-label" for="wsl-upass">Password</label>
        <input
          class="wsl-input-field"
          type="password"
          id="wsl-upass"
          name="upass"
          formControlName="upass"
          aria-describedby="wsl-upass-help"
          required
          autocomplete="new-password" />
        <small
          id="wsl-upass-help"
          [ngClass]="hints.get('upass').type"
          [innerHTML]="hints.get('upass').text"></small>
      </div>
      <div class="wsl-form-footer">
        <div class="wsl-form-submit">
          <button class="wsl-btn-lg wsl-btn-primary" type="submit">
            Submit
          </button>
        </div>
      </div>
    </form>
  </div>
</main>
